<template>
	<view class="preview">

		<!-- #ifndef H5 -->
		<tn-nav-bar fixed :alpha="true">{{title}}</tn-nav-bar>
		<!-- #endif -->
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="tn-text-center " style="padding: 40rpx 0 0 0 ;">
				<view class="tag-item tn-padding-sm tn-text-xl-xl "
					style="display: inline-grid;border: 1rpx solid #F8F7F8;border-radius: 20rpx;">
					<view>
						<text class="tn-icon-at-sign tn-padding-right-xs"></text>
						<text> {{info.name}}</text>
					</view>
				</view>
				<view class="tn-padding-sm" v-if="info.hash">
					<text class="tn-padding-right-xs">Hash:</text>
					<text class="tn-padding-right-xs">{{info.hash}}</text>
					<text class="tn-icon-copy" @tap="copyBtn(info.hash)"></text>
				</view>
			</view>
			<view v-if="info.content">
				<view style="border-bottom: 1px solid #333; margin: 10rpx 40rpx;"></view>
				<view style="padding: 0 20rpx;">
					<rich-text :nodes="info.content"></rich-text>
				</view>
			</view>

			<!--  -->
			<view v-if="server">
				<view v-for="(item,index) in server" :key="index" class="server-box" style="padding: 0 20rpx;">
					<view style="border: 1px solid #333; margin: 10rpx 40rpx;"></view>
					<view>
						<view>
							<view class="info">
								<text class="my-icon-server tn-text-xl tn-padding-right-xs"></text>
								<text>{{item.name}}</text>
							</view>
							<view class="info">
								<text class="my-icon-gpu tn-text-xl tn-padding-right-xs"></text>
								<text class="tn-padding-right-xs">{{item.gpu_name}}</text>
								<text> ( {{item.gpu_ram}} GB )</text>
							</view>
							<view class="info">
								<text class="my-icon-ram tn-text-xl tn-padding-right-xs"></text>
								<text>{{item.ram}} GB</text>
							</view>
							<view  v-if="item.user" class="info">
								<text class="tn-icon-my tn-text-xl tn-padding-right-xs"></text>
								<view class="tn-padding-right-xs">{{ item.user.nickname }}</view>
								<view class="tn-round"
									:style="'background-image:url('+ item.user.avatar +');width: 40rpx;height: 40rpx;background-size: cover;'">
								</view>
							</view>
						</view>
						<!-- <view>闲置中</view> -->
					</view>
					
				</view>
			</view>

		</view>


	</view>
</template>

<script>
import { forEach } from '../../tuniao-ui/libs/luch-request/utils';
	export default {
		onLoad(e) {
			this.$tn.http.post('/api/model/info', {
				key: e.key,
				type: e.type
			}).then(res => {
				if (res.name) {
					this.info = res
					this.setTitle(res.name)
					if(res.drawing_server.length){
						forEach(res.drawing_server,(item)=>{
							item.ram = (item.ram / 1024 / 1024 / 1024).toFixed(2);
							item.gpu_ram = (item.gpu_ram / 1024 / 1024 / 1024).toFixed(2);

							
						})
						this.server = res.drawing_server
					}
				} else {
					uni.showModal({
						content: '无该模型数据',
						showCancel: false,
						confirmText: '返回',
						success: function() {
							if(getCurrentPages().length == 1){
								uni.redirectTo({
									url:'/pages/index/index'
								})
							}else{
								uni.navigateBack()
							}
						}
					})
				}

			}).catch(err => {
				console.error('err', err)
				uni.showModal({
					content: 'X_X',
				})
			});
		},
		data() {
			return {
				title: 'Loading...',
				server: [],
				index: 0,
				info: {
					name: 'Loading...',
					hash: 'Loading...',
					content: '',


				},
				list: [],
			}
		},
		computed: {
			// 兼容小程序
			gridItemWidth() {
				return 100 / this.col + '%'
			}
		},
		methods: {
			swiperChange(e) {
				this.index = e.detail.current;
				this.setTitle(this.list[e.detail.current].title)
			},
			setTitle(title) {
				this.title = title
				uni.setNavigationBarTitle({
					title: title
				});
			},
			downBtn(index) {
				// #ifdef H5
				var oA = document.createElement("a");
				oA.download = this.list[index].title; // 设置下载的文件名，默认是'下载'
				oA.href = this.list[index].url;
				document.body.appendChild(oA);
				oA.click();
				oA.remove();
				// #endif

				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.list[index].url,
					success: function() {
						uni.showToast({
							title: '保存成功',
						})
						console.log('save success');
					}
				});
				// #endif
			},
			copyBtn(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('success');
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.server-box {
		.info {
			display: flex;
			align-items: center;

		}
	}

	.boy-container {
		padding: 0 20rpx 20rpx 20rpx;
	}

	.tag-group {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		margin-bottom: 10rpx;

		.tag-item {
			margin: 10rpx 10rpx 10rpx 0;
			color: #dddddd;
			border: 1rpx solid #F8F7F8;
			padding: 4rpx 14rpx 6rpx;
			border-radius: 10rpx;
			font-size: 20rpx;
		}

	}

	.button-container {
		display: flex;
		justify-content: center;
		width: 100%;
		text-align: center;
	}

	.button {
		color: white;
		flex-basis: calc(100% / 1);
		text-align: center;
		padding: 10rpx;

		&:not(:last-child) {
			border-right: 1px solid #333;
		}

		&-icon {}
	}

	.preview {
		background-color: black;
		color: white;
		min-height: 100vh;
	}

	.swiper {
		min-height: 100vh;
	}

	.swiper-item {
		/* min-height: 100%; */
	}
</style>